#{extends '/template/main.html' /}
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">产品需求</h3>
    </div>
    <div class="panel-body">
        <form method="get" id="searchForm" action="/BS0033/admin/product/ProductNeedCtrl/index/${pageNumber}">
            <div style="margin-bottom: 20px;width:160px;float: left;">
                <input type="text" name="name" id="name" class="form-control" style="width:150px" placeholder="用户昵称" value="${name}">
            </div>
            <div style="margin-bottom: 20px;width:160px;float: left;">
                <input type="text" name="content" id="content" class="form-control" style="width:150px" placeholder="产品需求" value="${content}">
            </div>
        </form>
        <button class="btn btn-turquoise" id="searchBtn">开始检索</button>
        <table class="table table-bordered table-striped" id="example-2">
            <thead>
            <tr >
                <th style="width: 5%; text-align: center;">序号</th>
                <th style="width: 10%; text-align: center;">用户昵称</th>
                <th style="width: 80%;">内容</th>
            </tr>
            </thead>
            <tbody class="middle-align">
            #{paginate.list items:resultPage , as :'productNeed'}
            <tr>
                <td style="width: 5%; text-align: center;">${productNeed_index}</td>
                <td style="width: 10%; text-align: center;">${productNeed?.webUser.nickName}</td>
                <td style="width: 80%;">${productNeed?.content}</td>
            </tr>
            #{/paginate.list}
            </tbody>
        </table>
        <div id="layerPage" class="col-xs-12"></div>
    </div>
</div>
<!-- Imported styles on this page -->
<link rel="stylesheet" href="/public/js/datatables/dataTables.bootstrap.css">

<script src="/public/js/datatables/js/jquery.dataTables.min.js"></script>


<!-- Imported scripts on this page -->
<script src="/public/js/datatables/dataTables.bootstrap.js"></script>
<script src="/public/js/datatables/yadcf/jquery.dataTables.yadcf.js"></script>
<script src="/public/js/datatables/tabletools/dataTables.tableTools.min.js"></script>

<script type="text/javascript" src="/public/laypage/laypage.js"></script>
<script type="text/javascript">
    // 分页
    laypage({
        cont: $('#layerPage'), //容器。值支持id名、原生dom对象，jquery对象,
        pages: '${resultPage?.pageCount}', //总页数
        skin: 'yahei',
        curr:'${pageNumber}',
        jump: function(e, first){ //触发分页后的回调
            if(!first){ //一定要加此判断，否则初始时会无限刷新
                $('#pageNumber').val(e.curr);
                $("#searchForm").attr("action", " /BS0033/admin/product/ProductNeedCtrl/index/"+e.curr);
                $('#searchForm').submit();
            }
        }
    });
    $(document).on("click", "#searchBtn", function(){
        $("#searchForm").attr("action", " /BS0033/admin/product/ProductNeedCtrl/index/1");
        $('#searchForm').submit();
    })
</script>
